<template>
    <div>
        <div class="header">
            <div class="topBox">
                <div class="cityBox">
                    <span>廊坊市</span>
                </div>
                <div class="rigBox">
                    <ul class="rigList">
                        <li class="cont">
                            请登录
                        </li>
                        <li class="cont">注册</li>
                        <li class="cont gift"><i class="GiftIcon"></i>签到有礼</li>
                        <li class="cont">我的订单</li>
                        <li class="cont">我的特卖<div class="c-h-area-triangle"></div></li>
                        <li class="cont">会员俱乐部<div class="c-h-area-triangle"></div></li>
                        <li class="cont">客户服务<div class="c-h-area-triangle"></div></li>
                        <li class="cont phone"><i class="phoneIcon"></i>手机版</li>
                        <li class="cont noAfter">更多<div class="c-h-area-triangle"></div></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="logoBox">
            <div class="logo">
                <img src="//b.appsimg.com/upload/momin/2020/06/16/82/1592278113502.png" alt="">
            </div>
            <div class="logoLeft">
                <img src="//b.appsimg.com/upload/momin/2020/04/16/150/1587017895494.jpg" alt="">
            </div>
            <div class="searchBox">
                <div class="searchLeft">
                    <div class="search">
                        <input type="text" placeholder="女童鞋">
                        <span class="searchBg">
                            <i class="searchIcon"></i>
                        </span>
                    </div>
                    <div class="typeList">
                        <ul class="list">
                            <li>女包</li>
                            <li><span class="hidden">|</span>加绒</li>
                            <li><span class="hidden">|</span>耐克女鞋</li>   
                            <li><span class="hidden">|</span>大衣</li>
                            <li><span class="hidden">|</span>儿童运动鞋</li>
                            <li><span class="hidden">|</span>伊芙丽</li>
                            <li><span class="hidden">|</span>女单鞋</li>
                            <li><span class="hidden">|</span>睡衣</li>
                            <li><span class="hidden">|</span>口红</li> 
                            <li><span class="hidden">|</span>男鞋</li>
                        </ul>
                    </div>
                </div>
                <div class="shopBag">
                    <div class="bagBox">
                        <span class="iconBag"></span>
                        <span class="shopTxt">购物袋</span>
                        <span class="shopNum">
                            <span class="num">0</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
        
<style lang="scss">
*{
    padding: 0;
    margin: 0;
}
ul,li{
    list-style:none;
}
.header{
    width: 100%;
    background: rgb(245,245,245);
    padding: 5px 0 ;
    .topBox{
        width: 1000px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        .rigBox{
            color: #666;
            .rigList{
                display: flex;
                li{
                    position: relative;
                    .c-h-area-triangle{
                        position: absolute;
                        top: 8px;
                        right: 22px;
                        display: inline-block;
                        width: 0;
                        height: 0;
                        border-width: 4px;
                        border-color: #999 transparent transparent transparent;
                        border-style: solid dashed dotted dashed;
                        vertical-align: top;
                    }
                    .phoneIcon{
                        display: block;
                        background-image: url(//shop.vipstatic.com/img/common/header/sprites-hash-06206acd.png?78d4dd66);
                        background-position: -294px -142px;
                        width: 10px;
                        height: 14px;
                        margin-left: 1px;
                        margin-right: 5px;
                        margin-top: -3px;
                    }
                }
                li.phone{
                    display: flex;
                    align-items: center;
                }
                li.noAfter:after{
                    content:''
                }
                li.cont:after{
                    content:'/';
                    padding-left: 16px;
                    padding-right: 16px;
                    color: #ddd;
                }
                li.gift{
                    display: flex;
                    
                }
                .GiftIcon{
                    display: flex;
                    width: 15px;
                    height: 18px;
                    margin-right: 3px;
                    margin-top:-3px;
                    background-image:(url(https://shop.vipstatic.com/img/common/header_sign-hash-0459d02c.gif?dd7841df));
                    // background-size:cover;
                }
            }
        }
    }
}
.logoBox{
    width: 1000px;
    margin: 0 auto;
    display: flex;
    .logo{
        margin-left: -20px;
        min-width: 160px;
        margin-right: 1px;
        img{
            height: 100px;
        }
    }
    .logoLeft{
        img{
            width: 304px;
            height: 100px;
        }
        
    }
    .searchBox{
        margin-left: 40px;
        display: flex;
        justify-content: space-between;
        .searchLeft{
            position: relative;
            margin-top: 33px;
            .search{
                display: flex;
                width: 387px;
                height: 34px;
                border: 2px solid #fa2a83;
                input{
                    width: 335px;
                    height: 31px;
                    border: none;
                    box-sizing: border-box;
                    padding: 2px 12px;
                    outline: none;
                }
                .searchBg{
                    width: 53px;
                    height: 26px;
                    padding-top: 6px;
                    padding-bottom: 2px;
                    display: inline-block;
                    background: #fa2a83;
                    position: absolute;
                    top: 0;
                    right: 0;
                   .searchIcon{
                        background-image: url(//shop.vipstatic.com/img/common/header/sprites-hash-06206acd.png?78d4dd66);
                        background-position: -285px -104px;
                        width: 19px;
                        height: 22px;
                        display: inline-block;
                    } 
                } 
                
            }
            .typeList{
                width: 345px;
                overflow: hidden;
                height: 19px;
                margin-top: 2px;
                .list{
                    display: flex;
                    font-size: 12px;
                    color: #aaa;
                    flex-wrap: wrap;
                    margin-top: 2px;
                    li{
                        cursor: pointer;
                        .hidden{
                            margin: 0 9px;
                        }
                    }
                }
            }
        }
        .shopBag{
            margin-top: 33px;
            margin-right: 15px;
            width: 96px;
            height: 33px;
            margin-left: 15px;
            .bagBox{
                background: #f6f7f9;
                border: 1px solid #ccc;
                display: flex;
                align-items: center;
                height: 100%;
                justify-content: space-around;
                .iconBag{
                    display: inline-block;
                    background-image: url(//shop.vipstatic.com/img/common/header/sprites-hash-06206acd.png?78d4dd66);
                    background-position: 0 -208px;
                    width: 12px;
                    height: 17px;
                }
                .shopTxt{
                    font-size: 12px;
                }
                .shopNum{
                    border-radius: 8px;
                    height: 16px;
                    width: 24px;
                    line-height: 16px;
                    color: #fff;
                    text-align: center;
                    background-color: #f00581;
                    .num{
                        color: #fff;
                        font-size: 12px;
                    }
                }
            }
        }
    }
}
</style> 